<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../style/style.css">
  <link rel="stylesheet" href="../style/shoppingcar.css">
  <style>
    table {
      font-size: 12px;
      font-family: verdana, Microsoft YaHei, SimSun, -apple-system,
        BlinkMacSystemFont, PingFang SC;
      color: #434343;
      width: 985px;
      border-collapse: collapse;
      margin: auto;
    }

    .thead {
      height: 32px;
      line-height: 32px;
      margin: 0 0 10px;
      padding: 5px 0;
      background: #f3f3f3;
      border: 1px solid #e9e9e9;
      border-top: 0;
      text-align: left;
    }

    tr input[type="checkbox"] {
      vertical-align: middle;
      margin: 0 5px 0 10px;
    }

    a {
      text-decoration: none;
      color: #434343;
    }

    #totalPrice1 {
      position: relative;
      width: 984px;
      margin: 0 auto;
      margin-top: 10px;
      height: 60px;
      background-color: #f8f8f8;
      text-align: right;
      font-size: 12px;
      color: #333;
      border:1px solid #e9e9e9
    }
    .js{
      width: 120px;
      height: 60px;
      line-height: 60px;
      display: inline-block;
      float: right;
      background-color: red;
      text-align: center;
      color: white;
      font-size: 22px;
      font-weight: 600;
    }
.zj{
  display: block;
  position: absolute;
  left: 650px;
  top: 10px;
}
#totalPrice{
  position:absolute;
  color: red;
  font-size: 16px;
  font-weight: 600;
  top: 7px;
  left: 750px;
}
.zyf{
  display: block;
  position: absolute;
  left:660px;
  top: 30px;
}
.by{
  font-size: 16px;
  color: red;
  font-weight: 600;
  font-style: normal;
}
  </style>
</head>

<body>
  <div id="topNavWrap">
    <div id="topNav">
      <div id="topNavLeft">
        <span>考拉欢迎你！</span>
        <a class="login" href="#">登录</a>
        <span class="sep">|</span>
        <a class="register" target="_blank" href="#">免费注册</a>
        <a class="app" target="_blank" href="#">手机考拉</a>
      </div>
      <ul id="topNavRight">
        <li><a href="#">每日签到</a></li>
        <li><a>我的订单</a></li>
        <li class="toplevel">
          <div>
            <a>个人中心</a>
            <div class="xl">
              <a href="#">我的优惠券</a>
              <a href="#">我的购物津贴</a>
              <a href="#">我的红包</a>
              <a href="#">我的考拉豆</a>
              <a href="#">账号管理</a>
              <a href="#">我的实名认证</a>
              <a href="#">我的发票抬头</a>
              <a href="#">我的收藏商品</a>
              <a href="#">我的关注品牌</a>
              <a href="#">售后管理</a>
            </div>
          </div>
        </li>
        <li class="toplevel ">
          <div>
            <a>客户服务</a>
            <div class="xl">
              <a href="#">联系客服</a>
              <a href="#">帮助中心</a>
              <a href="#">知识产权保护</a>
              <a href="#">规则中心</a>
            </div>
          </div>
        </li>
        <li class="toplevel">
          <div>
            <a>充值中心</a>
            <div class="xl">
              <a href="#">话费充值</a>
              <a href="#">游戏充值</a>
              <a href="#">AppStore充值</a>

            </div>
          </div>
        </li>
        <li class="toplevel">
          <div>
            <a>消费者权益</a>
            <div class="xl">
              <a href="">消费者告知书</a>
            </div>
          </div>
        </li>
        <li class="toplevel">
          <div>
            <a>更多</a>
            <div class="xl">
              <a href="#">收藏本站</a>
              <a href="#">新浪微博</a>
              <a href="#">微信公众号</a>
              <a href="#">招商合作</a>
            </div>
          </div>
        </li>
        <li><a>视频内容</a></li>
      </ul>
    </div>
  </div>
  <div id="headerWrap">
    <div id="header">
      <a class="logo" href="#">
        <img
          src="http://kaola-haitao.oss.kaolacdn.com/f69c45fd-8d91-4e18-8e3f-a546be302a12.png?x-oss-process=image/resize,w_210,h_0/quality,q_85&v=1"
          alt="">
      </a>

    </div>

  </div>
  <div class="itemCon"></div>
  <h3 class="mycar">我的购物车</h3>
  <table>
    <thead>
      <tr class="thead">
        <th colspan="2"><input type="checkbox" id="all" />全选</th>
        <th style="width: 208px">商品</th>
        <th style="width: 140px"></th>
        <th style="width: 170px; text-align: center">单价</th>
        <th style="width: 80px; text-align: center">数量</th>
        <th style="width: 100px; text-align: right; padding-right: 40px">
          小计
        </th>
        <th style="width: 75px">操作</th>
      </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
      
    </tfoot>
    
  </table>
  <div id="totalPrice1">
    
      <span class="zj">总价（不含运费）：</span>
      <span class="zyf">运费：<em class="by">包邮</em></span>
      <span id="totalPrice"></span>
      <a class="js">去结算</a>
  </div>

  <script type="module">
    import StepNumber from "../scripts/StepNumber.js";

    var list = JSON.parse(localStorage.getItem("car"));

    // console.log(list)

    var list1 = list.map(function (item) {
      // console.log(item.bigcon)
      if (item.shop === null) {
        item.shop = "考拉自营店"
      }
      return { ids: item.ids, checked: false, icon: item.img, num: 1, delete: false, total: item.price, price: item.price, title: item.title, info: item.shop }
    })

    // console.log(list)
    var shopList = [];
    var tbody, all, totalPrice;
    init();

    function init() {
      tbody = document.querySelector("table>tbody");
      totalPrice = document.querySelector("#totalPrice");
      all = document.querySelector("#all");
      //     list.forEach((item) => {
      //       var goods = new GoodsItem(item);
      //       goods.appendTo(".itemCon");
      //       goods.addEventListener(GoodsItem.GOODS_ADD_EVENT, goodAddhandler);
      //     });
    }
    all.addEventListener("click", ckHandler);

    list1.forEach(function (item, index) {
      var o = getSameData(item);
      if (!o) {
        o = {
          id: item.ids,
          checked: false,
          icon: item.icon,
          title: item.info,
          info: item.title,
          price: item.price,
          num: 1,
          total: item.price,
          delete: false,
        };
        shopList.push(o);
      } else {
        o.num++;
        o.total = o.price * o.num;
      }
      createShoppingCar();
    })

    function getSameData(data) {
      return shopList.reduce((value, item) => {
        if (item.id === data.ids) value = item;
        return value;
      }, null);
    }
    // console.log(shopList)
    function createShoppingCar() {
      StepNumber.dispose();
      tbody.innerHTML = "";
      var elem = document.createDocumentFragment();
      for (var i = 0; i < shopList.length; i++) {
        var tr = document.createElement("tr");
        for (var prop in shopList[i]) {
          if (prop === "id") continue;
          var td = document.createElement("td");
          // console.log(prop)
          setTdContent(td, shopList[i], prop);
          tr.appendChild(td);
        }
        elem.appendChild(tr);
      }
      tbody.appendChild(elem);
      all.checked = shopList.every(item => item.checked);
      changeTotalPrice();
    }

    function setTdContent(td, data, prop) {
      // console.log(data,prop)
      switch (prop) {
        case "checked":
          var ck = document.createElement("input");
          ck.type = "checkbox";
          ck.checked = data[prop];
          ck.data = data;
          ck.addEventListener("click", ckHandler)
          td.appendChild(ck);
          break;
        case "icon":
          var img = new Image(80, 80);
          // console.log(data[prop])
          img.src = data[prop];
          td.appendChild(img);
          break;
        case "title":
        case "info":
          var div = document.createElement("div");

          div.textContent = data[prop];
          Object.assign(div.style, {
            height: "40px",
            lineHeight: "20px",
            overflow: "hidden",
          });
          td.appendChild(div);
          break;
        case "num":
          var step = new StepNumber();
          step.data = data;
          // console.log(data[prop])
          step.setStep(data[prop]);
          step.appendTo(td);
          step.addEventListener(StepNumber.STEP_CHANGE_EVENT, changeStepHandler);
          break;
        case "total":
          td.textContent = "￥" + Number(data[prop]).toFixed(2);
          td.style.textAlign = "right";
          td.style.paddingRight = "40px"
          break;
        case "price":
          td.textContent = "￥" + Number(data[prop]).toFixed(2);
          td.style.textAlign = "center";
          break;
        case "delete":
          var a = document.createElement("a");
          a.href = "javascript:void(0)";
          a.textContent = "删除";
          a.data = data;
          a.addEventListener("click", delHandler);
          td.appendChild(a);
      }
    }

    var nns = document.querySelectorAll(".nn");
    function changeStepHandler(e){
        // console.log(e.step,e.currentTarget.data);
        e.currentTarget.data.num=e.step;
        e.currentTarget.data.total=e.currentTarget.data.num*e.currentTarget.data.price;
        createShoppingCar();
      }

    function delHandler(e) {
      //  console.log(e.currentTarget.data);
      shopList = shopList.filter(item => {
        return item.id != e.currentTarget.data.id;
      })
      createShoppingCar();

    }

    function ckHandler(e) {
      if (e.currentTarget === all) {
        shopList.forEach(item => {
          item.checked = all.checked;
        })
      } else {
        e.currentTarget.data.checked = e.currentTarget.checked;
      }
      createShoppingCar();

    }

    function changeTotalPrice() {
      totalPrice.textContent = "￥" + shopList.reduce((value, item) => {
        if (item.checked) value += Number(item.total);
        return value;
      }, 0).toFixed(2);
    }
  </script>
</body>

</html>